<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
     <title>用户列表</title>
     <style>
       body {
      text-align: center;
    }

    table {
      margin: 0 auto;
      border-collapse: collapse;
      width: 80%;
      border: 2px solid #3399ff;
    }

    th,
    td {
      border: 1px solid #3399ff;
      padding: 10px;
      text-align: center;
    }

    th {
      background-color: #007acc;
      color: white;
    }

    tr:nth-child(even) {
      background-color: #e6f2ff;
    }

    tr:hover {
      background-color: #b3d9ff;
    }
    a {
      display: inline-block;
      text-decoration: none;
      color: #007bff;
      padding: 10px;
      border: 1px solid #007bff;
      border-radius: 5px;
      transition: all 0.3s ease;
      white-space: nowrap; /* 防止内容过长时换行 */
    }

    a:hover {
      background-color: #007bff;
      color: white;
    }
    .del{
     display: inline-block;
      text-decoration: none;
      color: #FF4500;
      padding: 10px;
      border: 1px solid #FF4500;
      border-radius: 5px;
      transition: all 0.3s ease;
      white-space: nowrap; /* 防止内容过长时换行 */
    }
    .del:hover{
     background-color: #FF4500;
      color: white;
    }
    .search-container {
            text-align: center;
            margin-top: 20px;
        }

       .search-input {
            width: 300px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
     </style>
     <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
 
     
     <h1 style="text-align: center">用户列表</h1>
     <!-- <a href="/">首页</a> -->
     <a href="/user/add">添加用户</a>
     <div class="search-container">
          <input class="search-input" type="text" placeholder="输入关键词搜索">
          <button onclick="searchUsers()">搜索</button>
      </div>
     <br/>
     <table width="100%">
          <thead>
               <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>别名</th>
                    <th>删除</th>
                    <th>编辑</th>
               </tr>
          </thead>
         
         
          <tbody>
               <%data.forEach(function (item, index) { %>
               <tr>
                    <td><%= item.id %></td>
                    <td><%= item.username %></td>
                    <td><%= item.password %></td>
                    <td><%= item.nickname %></td>
                    <td><a class='del' href="/user/delete/<%= item.id %>">删除</a></td>
                    <td><a href="/user/edit/<%= item.id %>">编辑</a></td>
               </tr>
               <% }); %>
          </tbody>
     </table>

    </body>
    <script>
         function searchUsers() {
              const keyword = document.querySelector('.search-input').value;
         if (keyword) {
           $.ajax({
             url: `/user/search/${keyword}`,
             type: 'GET',
             success: function (user) {
               // 将查询结果赋值给 data
               data = user;
               // 更新页面上的表格或其他展示区域
               updateTable(data);
             },
             error: function (error) {
               // 显示错误消息
               $('table').html('<tr><td colspan="6">加载用户列表失败，请稍后重试。</td></tr>');
               console.error(error);
             }
           });
         } else {
           location.href = `/user`;
         }
         }
    
         function updateTable(data) {
         // 清空现有表格内容
         $('table tbody').empty();
               // 如果数据为空，显示提示信息
        if (data.length === 0) {
            $('table tbody').append('<tr><td colspan="6">未找到相关图书。</td></tr>');
            return;
        }
      // 遍历数据并构建表格行
      $.each(data, function(index, item) {
        var row = "<tr>" +
                  "<td>" + item.id + "</td>" +
                  "<td>" + item.username + "</td>" +
                  "<td>" + item.password + "</td>" +
                  "<td>" + item.nickname + "</td>" +
                  "<td><a class='del' href='/user/delete/" + item.id + "'>删除</a></td>" +
                  "<td><a href='/user/edit/" + item.id + "'>编辑</a></td>" +
                  "</tr>";
        $('table tbody').append(row);
      });
    }
     </script>
    
    </html>